.titleMenuPanel {
  @left: @SYSMARGINLEFT;
  @right: @SYSMARGINRIGHT;
  @height: @SYSTOPPANELHEIGHT;
  @paddingTop: @SYSTOPPANELHEIGHT;
  .abs;
  left: @left;
  top: -@height;
  padding-left: 30px;
  color: @color-white;
  display: flex;
  .animation(.3s);
  z-index: 1;

  &.open {
    top: 0;
  }

  > .back {
    width: 34px;
    height: 34px;
    padding: 5px;
    border-radius: 34px;
    margin: 13px 4px;
    margin-left: -10px;
    cursor: pointer;
    &:hover {
      background-color: @theme;
    }
    &.active {
      background-color: fade(@theme, 80);
    }
    .icon {
      width: 24px;
      height: 24px;
      display: block;
    }
    .label {
      display: none;
    }
  }

  > .title {
    height: @height;
    .rel;
    margin-right: 15px;

    //background-image: url("../img/nav_o_l.png"), url("../img/nav_o_c.png"), url("../img/nav_o_r.png");
    //background-position: left, center, right;
    //background-repeat: no-repeat, no-repeat, no-repeat;
    //padding: 0 25px;

    .label {
      .rel;
      line-height: @height;
      font-size: 20px;
      .bold;
      opacity: 0.8;
      z-index: 2;
    }

    //.bg {
    //  .abs;
    //  left: 19px;
    //  right: 19px;
    //  top: 5px;
    //  height: 50px;
    //  background-image: url("../img/nav_o_bg.png");
    //  background-repeat: repeat-x;
    //  z-index: 1;
    //}
  }

  &.main {
    > .title {
      width: 210px;
      background-image: url("../img/logo.png");
      background-position: center bottom;
      background-repeat: no-repeat;
      .bg {
        background: none;
      }
    }
  }

  //@media screen and (max-width: 1100px) {
  //  .search {
  //    display: none;
  //  }
  //}

  > .moduleMenus {
    display: flex;
    > .menu {
      display: flex;
      position: relative;
      margin: 4px;
      height: 50px;
      margin-right: 0;
      padding: 8px 15px;
      //border-radius: 10px;
      //border: 1px solid fade(@color-white, 80);
      .animation();
      //background-color: fade(@theme, 50);
      cursor: pointer;

      background-image: url("../img/nav_l.png"), url("../img/nav_c.png"), url("../img/nav_r.png");
      background-position: left, center, right;
      background-repeat: no-repeat, no-repeat, no-repeat;

      .bg {
        .abs;
        left: 19px;
        right: 19px;
        top: 0;
        height: 50px;
        background-image: url("../img/nav_bg.png");
        background-repeat: repeat-x;
        z-index: 1;
      }

      &:hover, &.active {
        background-image: url("../img/nav_o_l.png"), url("../img/nav_o_c.png"), url("../img/nav_o_r.png");
        .bg {
          background-image: url("../img/nav_o_bg.png");
        }
      }

      .icon {
        width: 24px;
        height: 24px;
        margin: 4px;
        //display: block;
        z-index: 2;
        display: none;
      }
      .label {
        font-size: 16px;
        height: 24px;
        line-height: 24px;
        margin: 4px;
        .tac;
        z-index: 2;
        min-width: 100px;
      }
    }
  }

  > .menus {
    display: flex;
    margin: 4px;
    > .menu {
      .rel;
      margin: 0 5px;
      padding: 4px;
      border-radius: 10px;
      //border: 1px solid fade(@color-white, 80);
      .animation();
      cursor: pointer;
      //background-color: fade(@theme, 50);
      &:hover {
        background-color: @theme;
      }
      &.active {
        background-color: fade(@theme, 50);
      }
      .icon {
        width: 24px;
        height: 24px;
        margin: 0 13px;
        display: block;
      }
      .label {
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        margin-top: 4px;
        .tac;
      }
      .alert {
        .abs;
        width: 20px;
        height: 20px;
        right: 0;
        top: 0;
        background-color: red;
        color: white;
        border-radius: 20px;
        font-size: 12px;
        line-height: 20px;
        .tac;
      }
    }
  }

  //@media screen and (max-width: 1100px) {
  //  .menus {
  //    display: none;
  //  }
  //}
}